<template>
  <view>
    <eui-card is-full>
      <text class="uni-h6"
      >通过数据驱动的单选框和复选框，可直接通过连接 uniCloud
        获取数据，同时可以配合表单组件 uni-forms 使用</text
      >
    </eui-card>
    <eui-section title="本地数据" type="line">
      <eui-data-select
          v-model="value"
          :localdata="range"
          @change="change"
      ></eui-data-select>
    </eui-section>
    <eui-section
        title="云端数据"
        subTitle="连接云服务空间, 且存在相关的数据表才能生效(此处演示, 未连接云服务空间, 故不生效, 且有报错)"
        type="line"
    >
      <eui-data-select
          collection="opendb-app-list"
          field="appid as value, name as text"
          v-mode="value"
      />
    </eui-section>
    <eui-section title="是否可清除已选项" type="line">
      <eui-data-select
          v-model="value"
          :localdata="range"
          @change="change"
          :clear="false"
      ></eui-data-select>
    </eui-section>
    <eui-section title="配置左侧标题" type="line">
      <eui-data-select
          v-model="value"
          :localdata="range"
          @change="change"
          label="应用选择"
      ></eui-data-select>
    </eui-section>
  </view>
</template>

<script>
export default {
  data() {
    return {
      value: 0,
      range: [
        { value: 0, text: "篮球" },
        { value: 1, text: "足球" },
        { value: 2, text: "游泳" },
      ],
    };
  },
  methods: {
    change(e) {
      console.log("e:", e);
    },
  },
};
</script>

<route lang="json">
{
  "style": {
    "navigationBarTitleText": "DataSelect"
  }
}
</route>

<style lang="scss">
.text {
  font-size: 24rpx;
  color: #666;
  margin-top: 10rpx;
}

.uni-px-5 {
  padding-left: 20rpx;
  padding-right: 20rpx;
}

.uni-pb-5 {
  padding-bottom: 20rpx;
}
</style>

